/* 
    车辆轨迹
 */
<template>
    <div class="main">
        <section class="section">
            <!-- <div class="ebox">
                <el-button-group>
                    <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()" />
                    <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()" />
                    <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()" />
                    <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()" />
                </el-button-group>
            </div> -->
            <div id="container" style="width:100%;height:100%" />

        </section>
    </div>
</template>
 
<script>
export default {
    name: 'dashboard',
    watch: {
        initroad(newSpeed, oldSpeed) {
            myChart.setOption({
                series: [{
                    data: [newSpeed]
                }]
            })
        },
    },

    data() {
        return {
            // firstArr: [116.478935, 39.997761], //中心点/初始坐标=>联调时，用后台数据将此数据覆盖

            //绘制线路需要的坐标=>联调时，用后台数据将此数据覆盖(经纬度不要写反了,反了是出不来的)
            lineArr: [
                [116.66438, 39.53199],
                [116.665067, 39.53199],
            ],
            map: null,
            marker: null,
            // moveSpeed: 1000000,//需求要求改变速度的可保留

            // webSocket
            ws: null,
            ws_url: 'ws://127.0.0.1:18088/trapeze/trapeze',
            message: "",
            messageList: "",
            connected: false,
            timer_reconnect: null,//重连定时器
            lockReconnect: false,
            beat: false,
            timer_beat: null,
            lockBeat: false,
        }
    },
    mounted() { //异步加载（否则报错initMap is not defined）
        setTimeout(() => {
            this.initMap() // 初始化地图
            this.initroad()// 初始化轨迹
        }, 1000);
        // 动态添加经纬度数据

        this.getcreateWebSocket();
    },
    methods: {
        beforeDestroy() {//离开页面，销毁掉
            this.map && this.map.destroy();
        },
        getcreateWebSocket() {
            // debugger
            this.ws = new WebSocket(this.ws_url);
            //ws = new WebSocket("ws://10.2.33.14:8080/websocket");
            // 建立 web socket 连接成功触发事件
            this.ws.onopen = this.onopen;
            // 接收服务端数据时触发事件
            this.ws.onmessage = this.onmessage;
            // 断开 web socket 连接成功触发事件
            this.ws.onclose = this.onclose;
            // 出错
            this.ws.onerror = this.onerror;

        },
        onmessage(evt) {
            // this.beforeDestroy();
            this.carFastMove();
            var aa = JSON.parse(evt.data);
            var arr = [];
            arr[0] = aa.lng;
            arr[1] = aa.lat;
            var cc = new AMap.LngLat(aa.lng, aa.lat);
            this.lineArr.push(cc);
            console.log(this.lineArr);
            this.initroad();
            this.startAnimation();
            // this.initMap();
        },
        onopen() {
            // this.startAnimation();
            console.log("Info: WebSocket 连接成功.")
        },
        onclose() {
            console.log("Info: WebSocket 关闭.")
        },
        onerror() {
            console.log("Info: WebSocket 出现错误.")
        },

        // 初始化地图
        initMap() {
            this.map = new AMap.Map('container', {
                resizeEnable: true, // 窗口大小调整
                center: this.lineArr[0], // 中心 firstArr: [116.478935, 39.997761],
                zoom: 15
            })
            // // 添加maker
            this.marker = new AMap.Marker({
                map: this.map,
                // position: this.firstArr,
                icon: 'https://webapi.amap.com/images/car.png',
                offset: new AMap.Pixel(-26, -13), // 调整图片偏移
                autoRotation: true, // 自动旋转
                angle: -90 // 图片旋转角度
            })
        },
        // 初始化轨迹
        initroad() {
            // 将 icon 传入 marker(起始标记)
            var startMarker = new AMap.Marker({
                // position: new AMap.LngLat(116.35, 39.89),
                position: [116.655091, 39.52091],
                // icon: startIcon,
                offset: new AMap.Pixel(-13, -30)
            });
            // 创建一个 icon
            // var endIcon = new AMap.Icon({
            //     size: new AMap.Size(25, 34),
            //     image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            //     imageSize: new AMap.Size(135, 40),
            //     imageOffset: new AMap.Pixel(-95, -3)
            // });
            // 将 icon 传入 marker
            var endMarker = new AMap.Marker({
                // position: new AMap.LngLat(116.45, 39.93),
                position: this.lineArr[this.lineArr.length - 1],
                // icon: endIcon,
                offset: new AMap.Pixel(-13, -30)
            });
            // 将 markers 添加到地图
            this.map.add(this.lineArr[0], this.lineArr[this.lineArr.length - 1]);


            // 绘制还未经过的路线
            this.polyline = new AMap.Polyline({
                map: this.map,
                path: this.lineArr,
                showDir: true,
                strokeColor: '#28F', // 线颜色--蓝色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 10, // 线宽
                // strokeStyle: "solid"  //线样式
                lineJoin: 'round' // 折线拐点的绘制样式
            })
            // 绘制路过了的轨迹
            var passedPolyline = new AMap.Polyline({
                map: this.map,
                strokeColor: '#AF5', // 线颜色-绿色
                // path: lineArr.reverse(),
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6 // 线宽
                // strokeStyle: "solid"  //线样式
            })
            this.marker.on('moving', e => {
                passedPolyline.setPath(e.passedPath)
            })
            this.map.setFitView() // 合适的视口
        },
        startAnimation() {//车辆轨迹回放开始
            // const _this = this
            // _this.driving.search(
            //     new _this.mapModule.LngLat(121.378945, 32.265033),
            //     new _this.mapModule.LngLat(121.504128, 31.319716),
            //     function (status, result) {
            //         if (status === 'complete') {
            //             console.log('绘制驾车路线完成', result)
            //         } else {
            //             console.log('获取驾车数据失败：' + result)
            //         }
            //     }
            // )
            console.log(this.lineArr)
            this.marker.moveAlong(this.lineArr, 500); //这里的1000000为速度，可根据绘制线路需要的坐标来调整
            //（调试时不要设置太小了，不然看不出来）
            //this.marker.moveAlong(this.lineArr, this.moveSpeed); 
        },

        carFastMove() {//车辆轨迹回放改变速度
            this.moveSpeed = this.moveSpeed * 200;
        },

    },

}
</script>
<style scoped>
.section {
    width: 100%;
    height: 700px;
}

::v-deep .amap-logo {
    display: none !important;
    ;
}

::v-deep .amap-copyright {
    bottom: -100px;
    display: none !important;
    ;
}
</style>